<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地址联动</title>
</head>
<body>
  <div>
    <select id="province" @change="selProvince()">
      <option value="none">--请选择省--</option>
      <option v-for="(value, key) in provinces" :value="key">{{value}}</option>
    </select>
    <br><br>
    <hr>
    <div id="seleDiv">
      <select id="city" @change="selCity()">
        <option value="none">--请选择市--</option>
        <option v-for="(value, key) in cities" :value="key">{{value}}</option>
      </select>
      <span id="districtSpan">
        <select id="district">
          <option>--请选择县/区--</option>
          <option v-for="(value, key) in districts" :value="key">{{value}}</option>
        </select>
      </span>
    </div>
  </div>
  <script src="data.js"></script>
  <script src="vue.min.js"></script>
  <script>
    let v = new Vue({
      el : "body>div",
      data : {
        provinces : chineseDistricts["86"],
        cities : {},
        districts : {}
      },
      methods : {
        selProvince() {
          let key = document.querySelector("#province").value;
          v.cities = chineseDistricts[key];
        },
        selCity() {
          let key = document.querySelector("#city").value;
          v.districts = chineseDistricts[key];
        }
      }
    })
  </script>
</body>
</html>